<template>
  <div>
    <van-sticky>
 <div class="box">
      <img src="@/assets/返回 (2).png" alt="" class="oopp" @click="tui">

      <input type="text" placeholder="请输入病症名称或标题关键字" class="input" v-model="search">
      <span @click="sou" class="sousou">搜索</span>
    </div>
</van-sticky>

    <div v-if="!flag">
      <div></div>
      <!-- <div class="li">热门搜索</div> -->
      <!-- <div class="hj">
        <div v-for="item in kunlist" class="nmm">
          <div class="jh">
            {{ item.name }}
          </div>
        </div>
      </div> -->

      <div class="li">搜索历史</div>
      <div class="lll" style="height: 8rem;">
        <div v-for="(item, index) in searchlist" style="display: inline-block;margin-left: .1rem;">
          <div class="wen">{{ item }}<span @click="del(index)" class="yese">x</span></div>
        </div>
      </div>
    </div>
<div class="dazhan"></div>
    <div v-if="flag">
      <div v-for="(item, index) in soulist" :key="item.id" class="baga" @click="wang1(item.sickCircleId)">
        <span class="ghj">{{ item.title}}</span>
          <div class="neirong1">2018-12-23 19:52</div>
        <div class="neirong">{{ item.detail}}</div>
        <div class="zhe"></div>
        <div class="sc">
          <div class="zuo">
               评论: {{item.commentNum}}

          </div>
          <div class="you">
            收藏: {{item.collectionNum}}
          </div>
        </div>

      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from 'vue';


import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import router from '@/router'

const route = useRouter()
const title = ref('病症')
const search = ref('');
const soulist = ref([]);
const kunlist = ref([])
const flag = ref(false)
const sj=ref([])
const del = (index) => {
  searchlist.value.splice(index, 1)
}
const wang1 = (id: number) => {
  console.log()
  router.push({
    path: '/youdeails',
    query: {
      id: id,
    },
  })
  console.log(id)
}

const getlist = () => {
  axios.get('/health/share/v1/popularSearch').then((res) => {
    console.log(res)
    kunlist.value = res.data.result;
  })
}
getlist();
const searchlist = ref<string[]>([]);
const sou = () => {
  axios.get('/health/user/sickCircle/v1/searchSickCircle', {
    params: {
      keyWord: search.value,
    }
  }).then(res => {
    console.log(res);
    // let { diseaseSearchVoList, doctorSearchVoList, drugsSearchVoList } = res.data.result;
    // let data = [...diseaseSearchVoList, ...doctorSearchVoList, ...drugsSearchVoList];
    // console.log(data)
    soulist.value = res.data.result;
    sj.value=res.headers.date;
  })
  flag.value = true;
  if (search.value) {
    const newHistory = search.value.trim();
    if (!searchlist.value.includes(newHistory)) {
      searchlist.value.unshift(newHistory);
      savesearch();
    }
    searchlist.value = '';
  }
}
const savesearch = () => {
  localStorage.setItem('sou', JSON.stringify(searchlist.value));
}
const readSearchHistory = () => {
  const historyStr = localStorage.getItem('sou');
  if (historyStr) {
    searchlist.value = JSON.parse(historyStr);
  }
};
onMounted(() => {
  readSearchHistory()
})
// getlist();
const tui = () => {
  history.back();
}
</script>

<style scoped lang="scss">


.yese{
  width: 100%;
}
.oopp{
  margin-left: .3rem; //.3rem * 0.5
  margin-top:.50rem; //.45rem * 0.5
  width: 24px; // 48px * 0.5
  height: 24px; // 48px * 0.5

}
.sousou{
  width: 1.5rem;
  margin-left: .3rem; //.4rem * 0.5
  margin-top: .65rem; //.55rem * 0.5
  font-size: 12.5px; // 25px * 0.5
  font-weight: 600;
  color: rgb(76, 151, 237);
}

.zhan{
  width: 100%;
  height: 1rem; // 1rem * 0.5
}

.hj {
  display: flex;
  flex-wrap: wrap;
}
.ghj {
  display: block;
  font-size: 16px; // 22px * 0.5
  margin-top: .5rem; //.5rem * 0.5
  font-weight: 600;
  color: rgb(51, 51, 51);
  width: 90%;
  margin-left: 5%; // 5% * 0.5
}
.neirong{
  line-height: 15px; // 30px * 0.5
  color: rgb(70, 70, 70);
  font-size: 12px; // 13px * 0.5
  width: 90%;
  margin-left: 2.5%; // 5% * 0.5

  padding: 10px;

  // padding: ;

}
.neirong1{
  line-height:1rem; // 1rem * 0.5
  width: 90%;
  color:rgb(123, 123, 123);
  font-size: 10px; // 12px * 0.5
  margin-left:  5%; // 5% * 0.5
}
.baga{
  width: 100%;
  border-bottom: .15rem solid rgb(244, 244, 244); //.11rem * 0.5
  position: relative;
 .sc{
    width:  3.2rem; // 3.2rem * 0.5
    height: .6rem; //.6rem * 0.5
    right: 0;
    bottom: 3%; // 3% * 0.5
    position: absolute;
    font-size:15px; // 18px * 0.5
    display: flex;
   .zuo{
      width: 50%;

      font-weight: 500;
    }
   .you{
      width: 50%;
      font-weight: 500;
    }
  }
}
.nmm {
  width: 140px; // 140px * 0.5
  height: 40px; // 40px * 0.5
  background: #ccc;
  margin-left: 35px; // 35px * 0.5
  margin-top: 20px; // 20px * 0.5
  line-height: 40px; // 40px * 0.5
  text-align: center;
  border-radius: 50rem; // 50rem * 0.5
  display: inline;
}

.li {
  font-size: 15px; // 30px * 0.5
  margin-left: 30px; // 30px * 0.5
  color: rgb(47, 135, 234);
  margin-top: 25px; // 50px * 0.5
}

.wen {
  width: 2rem; // 2rem * 0.5
  height: .8rem; //.8rem * 0.5
  margin-left: .1rem; //.2rem * 0.5
  border-radius: .5rem; //.5rem * 0.5
  line-height: .8rem;
  text-align: center;
  background-color: rgb(242, 242, 242);
  color: rgb(117,117,117);
  margin-top: .5rem ; //.5rem * 0.5
}

.re {
  font-size: 30px; // 30px * 0.5
  margin-left: 30px; // 30px * 0.5
}

.box {
  width: 100%;
  height: 1.5rem; // 1.5rem * 0.5
  background-color: #fff;
  z-index: 999;
  border-bottom: .2rem solid rgb(242,242,242); //.2rem * 0.5
  display: flex;
}

.lll {
  margin-left: 30px; // 30px * 0.5
}

.jian {
  font-size: 22.5px; // 45px * 0.5
  margin-left: 20px; // 20px * 0.5
  margin-top: .48rem; //.48rem * 0.5
  color: rgb(102, 102, 102);
}

.input {
  width: 500px; // 500px * 0.5
  height: .9rem; //.9rem * 0.5
  border-radius: 50rem; // 50rem * 0.5
  margin-top: 16px; // 25px * 0.5
  z-index: 99999;
  border: none;
  margin-left: 10px; // 20px * 0.5
  padding-left: 35px; // 35px * 0.5
  background-color:rgb(242, 242, 242) ;
}
.zhe{
  width: 100%;
  height: 1.2rem;
  line-height: .8rem;
}
span {
  font-size: 16.5px; // 33px * 0.5
  margin-left: 20px; // 20px * 0.5
  margin-top: 20px; // 20px * 0.5
}
</style>
